<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.box li{
				list-style: none;
			}
			.box{
				position: relative;
				overflow: hidden;
				width: 759px;
				height: 423px;
				margin: 50px auto;
				/*border: 4px solid #000;*/
			}
			.box>ul{
				position: absolute;
				font-size: 0;
				top: 0;
				left: 0;
			}
			.box ol{
				position: absolute;
				bottom:0;
				left:0;
				height: 34px;
				width: 739px;
				background: rgba(0,0,0,0.3);
				padding: 4px 0 0 20px;
			}
			.box>ol>li{
				float: left;
				font-size: 2em;
				font-weight: bold;
				font-style: italic;
				color:#fff;
				width: 28px;
				height: 30px;
				margin: 0 4px;
				line-height: 30px;
				border-radius: 15px;
				padding-left: 2px;
				cursor: pointer;
			}
			.box>ol>li.curr{
				background: #121212;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li><img src="img114/a.png"/></li>
				<li><img src="img114/b.png"/></li>
				<li><img src="img114/c.png"/></li>
				<li><img src="img114/d.png"/></li>
				<li><img src="img114/e.png"/></li>
				<li><img src="img114/f.png"/></li>
				<li><img src="img114/g.png"/></li>
			</ul>
			<ol>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
			</ol>
		</div>
		<script src="jquery-1.11.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var singleheight = $('.box img').height();
				var currindex = 0;
				var timer = null;
				
				
				
				function move(){
					if (currindex < $('.box ul li').length -1) {
						currindex++;
					} else{
						currindex = 0;
					}
					var newtop = -1 * currindex * singleheight;
					$('.box ul').stop().animate({top:newtop},800);
					$('.box ol li').eq(currindex).addClass('curr').siblings().removeClass('curr');
					timer = setTimeout(move,3000);
				}
				move();
				
				$('.box').mouseenter(function(){
					clearTimeout(timer);
				}).mouseleave(function(){
					move();
				});
				
				
				$('.box ol li').mouseenter(function(){
					currindex = $(this).index() ;
					var newtop = -1 * currindex * singleheight;
					$('.box ul').stop().animate({top:newtop},800);
					$(this).addClass('curr').siblings().removeClass('curr');
				});
				
			});
		</script>
	</body>
</html>
